<template>
<div>

  <van-nav-bar
    title="订单详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <div style="font-size:.3rem;margin-top:.2rem;margin-left:.2rem">订单编号：{{queryVo.order.number}}</div>
  <div style="font-size:.27rem;margin-top:.2rem;margin-left:.2rem;margin-bottom:.5rem">订单总价：{{queryVo.order.amount}}￥</div>
  <div style="font-size:.27rem;margin-top:.2rem;margin-left:.2rem;margin-bottom:.5rem">收货地址：{{queryVo.order.address}}￥</div>
  <van-steps :active="active">
<!--  <van-steps :active="2">-->
    <van-step>下订单</van-step>
    <van-step>订单支付</van-step>
    <van-step>待收货</van-step>
    <van-step>待评价</van-step>
    <van-step>售后</van-step>
  </van-steps>
  <van-divider style="font-size:.15rem">订单详细</van-divider>


<!--
  :desc="item.orderTime"
  :title="item.consignee"
-->

  <div v-for="(item,index) in detailsList">

    <van-card
      :num="item.number"
      :price="item.amount/100"
      :title="item.name"
      :desc="item.dishFlavor"
      thumb="https://unpkg.com/@vant/assets/ipad.jpeg"
      @click="jump('/orderDetail/'+item.id)"
    >
      <div ></div>

      <template #footer>

      </template>
    </van-card>
    <van-divider style="font-size:.15rem"></van-divider>

  </div>
  <div style="height: .9rem"></div>
  <div v-if="queryVo.order.status==1">
    <van-submit-bar  :price="queryVo.order.amount" button-text="支付订单" @submit="onSubmit" button-color="#FAAB0C"/>
  </div >
  <div v-if="queryVo.order.status==2">
    <van-submit-bar  :price="queryVo.order.amount" button-text="确认收货" @submit="onSubmit" button-color="#FAAB0C" />
  </div >

  <div v-if="queryVo.order.status==3">
    <van-submit-bar  :price="queryVo.order.amount" button-text="确认收货" @submit="onSubmit" button-color="#FAAB0C" />
  </div >
  <div v-if="queryVo.order.status==4">
    <van-submit-bar  :price="queryVo.order.amount*100" button-text="去评价" @submit="onSubmit" button-color="#FAAB0C" />
  </div >


</div>
</template>

<script>
export default {
  name: "orderDetail",
  data() {
    return {
      active:"1",
      orderId:"",
      queryVo:{

        order:{
          id:3,
          number: "1234567",
          status:2,
          accountId:10,
          userId:8,
          addressBookId:222,
          orderTime:"2022-09-08 12:13:03",
          checkoutTime:"2022-09-05 13:26:21",
          payMethod:1,
          amount:4.00,
          remark:null,
          phone:"12345677733",
          address:" fffffssssfssfsfs",
          userName:"用户333",
          consignee:"签收人"
        },

      },
      detailsList:[]
    }
  },

  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };

  },
  created() {
    console.log("orderId", this.$route.params.id)
    let _this = this
    console.log("ssssssssssssssssssssssss"+this.orderId)
    this.$axios.get("/order/selectOrderDetailByOrderId/"+this.$route.params.id).then(resp => {
      /*"/order/selectOrderDetailByOrderId"+this.orderId
      * "/order/selectOrderDetailByOrderId", this.orderId*/
      console.log(resp.data.data.detailsList)
      _this.detailsList = resp.data.data.detailsList;
      _this.queryVo.order = resp.data.data.order;


      let state = resp.data.data.order.status;
      if (state === 1) {
        _this.active=1;
      } else if (state === 2) {
        _this.active=2;
      } else if (state === 3) {
        _this.active=2;
      } else if (state === 4) {
        _this.active=3;
      } else if (state === 5) {
        _this.active=4;
      }
    })
  },
  methods:{
    stateFormat(row) {
      console.log("获取的状态序号是"+row);
      let state = row;
      if (state === 1) {
        return "下订单";
      } else if (state === 2) {
        return "支付";
      } else if (state === 3) {
        return "待收货";
      } else if (state === 4) {
        return "待评价";
      } else if (state === 5) {
        return "售后";
      }
    },
  }
}
</script>

<style scoped>

</style>
